<template>
  <span>
    <a-cascader v-model:value="stringValue" 
        :options="options"
        showSearch
        v-bind="$attrs"
        @change="handleChange"
        :fieldNames="{ label: 'name', value: 'id', children: 'children' }"/>
  </span>
</template>

<script setup lang="ts">
/**
 * 定义组件的props和响应式数据
 * 
 * @param {string[] | number[]} value - 父级组件传递的选中值，类型为string[]或number[]
 * @returns {void} 无返回值，但会更新model状态
 * @example <CategoryUseCategory v-model:value="model"></CategoryUseCategory>
 */
const model = defineModel<string | number>('value')
const stringValue = defineModel<string[]>('stringValue')

/**
 * 从缓存中读取分类列表
 * 
 * @type {CascaderProps['options']} - 响应式选项，类型为CascaderProps['options']，用于定义级联选择器的选项数据
 */
const options = JSON.parse(localStorage.getItem('categoryList') || '[]')

/**
 * 选中的值的最后一个分类，精确分类
 * 
 * @param value 
 */
const handleChange = (value: number[]) => {
  model.value = value.slice(-1)[0]
}
</script>

<style scoped></style>